import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Table,
  Radio,
  Popconfirm,
} from 'antd';
import GeneralTableComponent from 'components/GeneralTableComponent';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { Option } = Select;
const RangePicker = DatePicker.RangePicker;

@connect(({ userList, loading }) => ({
  userList,
  loading: loading.models.loading,
}))
@Form.create()
export default class UserList extends PureComponent {
  state = {
    paramList:{
      pageNo: 1,
      pageSize: 10,
      name: '',
      mobile: '',
      startTime: '',
      endTime: '',
      members: '',
      orderNo: '',
      limitType: '',
      source: '',
    },
  };

  componentDidMount() {
    this.getUserListData();
  }

  getUserListData = () => {
    const { dispatch } = this.props;
    const { paramList } = this.state;

    let postParam = {}
    for (let [key, val] of Object.entries(paramList)) {
      if (val !== '') {
        postParam[key] = val;
      }
    }
    dispatch({
      type: 'userList/fetchGetUserCenterUserList',
      payload: {
        ...postParam
      }
    });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { paramList } = this.state;
    paramList.pageNo = pagination.current;
    this.getUserListData();
  };

  handleFormReset = () => {
    const { form } = this.props;
    const { paramList } = this.state;
    [
      paramList.name, 
      paramList.mobile, 
      paramList.startTime, 
      paramList.endTime, 
      paramList.members, 
      paramList.orderNo, 
      paramList.limitType, 
      paramList.source
    ] = ['', '', '', '', '', '', '', ''];
    paramList.pageNo = 1;
    form.resetFields();
    this.getUserListData();
  };

  handleSearch = (e) => {
    const { dispatch, form } = this.props;
    const { paramList } = this.state;
    e.preventDefault();
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      paramList.name = fieldsValue.name ? fieldsValue.name : '';
      paramList.mobile = fieldsValue.mobile ? fieldsValue.mobile : '';
      [paramList.startTime, paramList.endTime] = fieldsValue.time && fieldsValue.time[0] ? [fieldsValue.time[0].format('YYYY-MM-DD HH:mm:ss'), fieldsValue.time[1].format('YYYY-MM-DD HH:mm:ss')] : '';
      paramList.members = fieldsValue.isMember ? (fieldsValue.isMember === "all" ? '' : (fieldsValue.isMember === 'y' ? true : false)) : '';
      paramList.source = fieldsValue.source ? ( fieldsValue.source === "all" ? '' : fieldsValue.source ) : '';
      paramList.limitType = fieldsValue.type ? (fieldsValue.type === "all" ? '' : fieldsValue.type) : '';
      paramList.pageNo = 1;
      this.getUserListData();
    });
  };

  handleCancleMember = (row) => {
    //post
  };

  renderSimpleForm() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Card bordered={false} style={{marginBottom: 10}}>
        <Form onSubmit={this.handleSearch} layout="inline">
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col lg={6} md={12} sm={12}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>姓名</span>}>
                {getFieldDecorator('name')(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={12} sm={12}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>手机号</span>}>
                {getFieldDecorator('mobile')(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col lg={12} md={24} sm={24}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>起止时间</span>}>
                {getFieldDecorator('time')(
                  <RangePicker
                    ranges={{
                      近7天: [moment().subtract(7, 'days'), moment()],
                      近14天: [moment().subtract(14, 'days'), moment()],
                      近30天: [moment().subtract(30, 'days'), moment()],
                    }}
                  />
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={12} sm={12}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>是否会员</span>}>
                {getFieldDecorator('isMember')(
                  <Select style={{ width: 120 }} placeholder="全部">
                    <Option value="all">全部</Option>
                    <Option value="y">是</Option>
                    <Option value="n">否</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={12} sm={12}>
              {/*<FormItem label="订单号">
                {getFieldDecorator('order')(
                  <Input />
                )}
              </FormItem>*/}
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>产品来源</span>}>
                {getFieldDecorator('source')(
                  <Select style={{ width: 120 }} placeholder="全部">
                    <Option value="all">全部</Option>
                    <Option value="up">sdfz</Option>
                    {/* <Option value="xbeauty">想美</Option>
                    <Option value="xflower">信花花</Option> */}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={12} sm={12}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>额度类型</span>}>
                {getFieldDecorator('type')(
                  <Select style={{ width: 120 }} placeholder="全部">
                    <Option value="all">全部</Option>
                    <Option value="shop">购物额度</Option>
                    <Option value="loan">提现额度</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={12} sm={12}>
              <span>
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
                <Button  htmlType="submit" style={{marginLeft:12}} onClick={this.handleFormReset}>
                  清除
                </Button>
              </span>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }

  render() {
    const { userList: { userListData }, loading } = this.props;

    const tableColumns = [
      {
        title: '序号',
        dataIndex: '',
        key: 'gender',
        render: (text, record, index) => {
          return <span>{index + 1 + ( userListData.pagination.current - 1 ) * userListData.pagination.size}</span>
        }
      }, {
        title: '用户id',
        dataIndex: 'userId',
        key: 'userId',
        render: val => `${val}`
      }, {
        title: '产品来源',
        dataIndex: 'source',
        key: 'source',
        render: val => `${val === '/' ? '全部' : ( val === 'up' ? 'sdfz' : val )}`,
        // render: val => `${val === '/' ? '全部' : ( val === 'up' ? 'sdfz' : ( val === 'xbeauty' ? '想美' : ( val === 'xflower' ? '信花花' : val ) ) )}`,
      }, {
        title: '姓名&性别',
        dataIndex: 'name',
        key: 'name',
        render: (text, record, index) => {
          return <span>{ record.name + ' ' + ( record.gender === "男" ? '♂' : ( record.gender === "女" ? '♀' : '' ) ) }</span>
        }
      }, {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        render: val => `${val}`
      }, {
        title: '注册时间',
        dataIndex: 'registTime',
        key: 'registTime',
        render: val => `${val}`
      }, {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        render: (text, record, index) => {
          return <span>{ record.state == "risk_waiting" ? "待审核" : ( record.state == "risk" ? "已通过审核" : ( record.state == "risk_fail" ? "已拒绝订单" : record.state ) ) }</span>
        }
      }, {
        title: '购物额度',
        dataIndex: 'shopAmountLimit',
        key: 'shopAmountLimit',
        render: val => `${val}`
      }, {
        title: '提现额度',
        dataIndex: 'loanAmountLimit',
        key: 'loanAmountLimit',
        render: val => `${val}`
      }, {
      //   title: '借贷历史',
      //   dataIndex: 'loanHistory',
      //   key: 'loanHistory',
      //   render: (text, record, index) => {
      //     const historyList = record.loanHistory ? record.loanHistory.split(',') : [];
      //     const listItems = historyList.map((item) =>
      //       <div>
      //         <span>订单号: {item}</span>
      //       </div>
      //     );
      //     return historyList[0] ? <div>{ listItems }</div> : '/'
      //   }
      // }, {
        title: '剩余购物额度',
        dataIndex: 'shopAmountRemain',
        key: 'shopAmountRemain',
        render: val => `${val}`
      }, {
        title: '剩余提现额度',
        dataIndex: 'loanAmountRemain',
        key: 'loanAmountRemain',
        render: val => `${val}`
      }, {
        title: '是否会员',
        dataIndex: 'members',
        key: 'members',
        render: (text, record, index) => {
          return <span>{ record.members ? '是' : '否' }</span>
        }
      }, {
        title: '会员有效期',
        dataIndex: 'memberPeroid',
        key: 'memberPeroid',
        render: val => `${val}`
      // }, {
      //   title: '操作',
      //   dataIndex: '',
      //   key: 'gender',
      //   render: (text, record, index) => {
      //     return record.members
      //       ? (
      //         <Popconfirm title="确认取消 ?" onConfirm={() => this.handleCancleMember(record)}>
      //           <a href="javascript:;">取消会员</a>
      //         </Popconfirm>
      //       ) : null
      //   }
      },
    ]

    return (
      <PageHeaderLayout title="用户列表">
        <Card bordered={false}>
          <div>{this.renderSimpleForm()}</div>

          <GeneralTableComponent
            loading={loading}
            data={userListData}
            columns={tableColumns}
            onChange={this.handleStandardTableChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
